import React from "react";
import { Toast } from 'antd-mobile';
import { List, AutoSizer } from 'react-virtualized'
import axios from "axios";
import NavHeader from "../../components/NavHeader";
import './index.css'
// import styles from './index.module.css'

// 导入utils中获取当前定位城市的方法
import { getCurrentCity } from "../../utils";

// 渲染城市列表的数据格式为
// { a: [{},{}], b: [{}, ...]}
// 渲染右侧索引的数据格式
// ['a', 'b']

// 数据格式化的方法
const formatCityList= list=>{
  const cityList = {}
  // const cityIndex = []

  // 1.遍历list数组
  list.forEach(item => {
    // 2.获取每一个城市的首字母
    const first = item.short.substr(0,1)
    // console.log(first);
    // 3.判断citylist中是否有该分类
    if(cityList[first]) {
      // 4.如果有 就往该数据中push
      // cityList[first] ==>[{}, {}]
      cityList[first].push(item)
    } else {
      // 4.如果没有 就先建一个数组 然后 把当前城市信息添加数组中
      cityList[first] = [item]
    }
  })

  // 获取索引数据
  const cityIndex = Object.keys(cityList).sort()

  return {
    cityList,
    cityIndex
  }
}

// List 组件
// 列表数据的数据源
// const list = Array(100).fill('react-virtualized')

// 索引（A B 等）的高度
const TITLE_HEIGHT = 36
// 每个城市名称的高度
const NAME_HEIGHT = 50

// 封装一个 处理字母索引的方法
const formatCityIndex = (letter) => {
  switch (letter) {
    case '#':
      return '当前定位'
    case 'hot':
      return '热门城市'
  
    default:
      return letter.toUpperCase()
  }
}

// 有房源的城市
const HOUSE_CITY = ['北京', '上海', '广东', '深圳']

export default class CityList extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      cityList: {},
      cityIndex: [],
      // 指定右侧字母索引高亮
      activeIndex: 0
    }

    // 创建 ref对象
    this.cityListComponent = React.createRef()
  }
 
  
  // 初始化数据
  async componentDidMount() {
  //  调用后才可以获取
    await this.getCityList()

    // 调用measureAllRows 提前计算list中每一行的高度 实现scrollToRow的精确跳转
    // 调用该方法时 要保证数据已经获取到 上面getCityList是异步的
    this.cityListComponent.current.measureAllRows()
  }
  // 定义接收数据的方法
  // list: [{},{}]
  async getCityList() {
    const res = await axios.get('http://liufusong.top:8080/area/city?level=1')
    // console.log(res);
  
     const { cityList, cityIndex } = formatCityList(res.data.body)
    //  console.log(cityList, cityIndex);


    //  获取热门城市数据
    // 将数据添加到citylist中
    const hotRes = await axios.get('http://liufusong.top:8080/area/hot')
    // console.log(hotRes);
    cityList['hot'] = hotRes.data.body
    // 将索引添加到cityIndex中
    cityIndex.unshift('hot')

    // 获取当前定位城市
    const curCity = await getCurrentCity()
    // console.log(curCity);
    /**
     * 1.将当前定位城市数据添加到 citylist中
     * 2.将当前定位城市索引添加到 cityIndex中
     * */ 
    cityList['#'] = [curCity]
    cityIndex.unshift('#')

    this.setState({
      cityList,
      cityIndex
    })
  
  }

  // 给城市列表项 绑定点击事件
  changeCity({ label, value }) {
    // 判断当前城市是否有房源（北上广深）
  //  console.log(curCity);
  if(HOUSE_CITY.indexOf(label) > -1) {
    // 有 保存到本地 并返回上一页
    localStorage.setItem('hkzf_city', JSON.stringify({ label, value }))
    this.props.history.go(-1)
  } else {
    Toast.info('该城市暂无房源数据', 1, null, false)
  }
  }

  // List渲染每一行数据的方法
// 函数的返回值就表示 最终渲染在页面中的内容
 rowRenderer = ({
  key, 
  index, // 索引
  isScrolling, // 当前项是否处在滚动中
  isVisible, // 当前项在List中 可见
  style, // Style重点属性 一定要给每一行数据添加该样式！指定每一行的位置
}) => {
  // 获取每一行的字母索引
  const { cityIndex, cityList } = this.state
  const letter = cityIndex[index]
  // console.log(letter);

  // 获取指定索引下的城市列表数据
  // console.log(cityList[letter]);
  
   
  return (
    <div key={key} style={style} className="city">
     <div className="title">{formatCityIndex(letter)}</div>
     {
       cityList[letter].map(item => (
        <div className="name" key={item.value} onClick={() => this.changeCity(item)}>{item.label}</div>
       ))
     }
    </div>
  );
}

// 创建动态计算每一行的高度的 方法
getRowHeight = ({ index }) => {
  // 索引标题高度 + 城市数量 * 城市名称的高度
  // TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
  const { cityList, cityIndex } = this.state
  return TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
}

// 封装渲染右侧索引列表的方法
renderCityIndex () {
  // 获取到cityIndex 并遍历 实现渲染
  const { activeIndex, cityIndex } = this.state
  return cityIndex.map((item, index) => (
    <li className="city-index-item" key={item} onClick={()=> {
      this.cityListComponent.current.scrollToRow(index)
    }}>
    <span className={activeIndex === index ? 'index-active' : ''}>{item === 'hot' ? '热' : item.toUpperCase()}</span>
  </li>
  ))
}

// 用于获取list组件中 渲染行的信息
onRowsRendered = ({ startIndex }) => {
  if(this.state.activeIndex !== startIndex) {
    this.setState({
      activeIndex: startIndex
    })
  }

}



  render () {
        return (
          <div className='cityList'>
            {/* 顶部导航栏 */}
            <NavHeader>城市选择</NavHeader>

            {/* 城市列表 */}
            <AutoSizer>
            {({ height, width }) => (
              <List
                ref={this.cityListComponent}
                width={width}
                height={height}
                rowCount={this.state.cityIndex.length}
                rowHeight={this.getRowHeight}
                rowRenderer={this.rowRenderer}
                onRowsRendered={this.onRowsRendered}
                scrollToAlignment="start"
              />
            )}
          </AutoSizer>

          {/*右侧索引列表 */}
          {/* 1.封装一个renderCityIndex方法，用来渲染城市索引列表
          2.在方法中获取索引数组cityIndex 遍历cityIndex 渲染索引列表
          3.将索引hot替换为 热
          4.在state中添加状态activeIndex 指定当前高亮的索引
          5.在遍历cityIndex时 添加当前字母索引是否高亮的判断条件
          */}
          <ul className="city-index">
            {this.renderCityIndex()}
          </ul>

          </div>
        )
    }
}